<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>多视频投影融合</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [120.170646, 30.28362, 8200], //相机的位置
        lookAt: [120.170646, 30.28362, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        isOpenTextureProject: true, //开启纹理投影的功能
        useDefaultTexture: true, //是否使用瓦片默认纹理
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        baseLayer: [
            // //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            },
        ]
    });

    app.openStats(); //打开帧率统计功能

    //使用ProjectTextureObject组件。operatorMode表示操作的方式，默认是空值，表示没有操作。translate: 拖拽操作, rotate: 旋转操作
    function addProject(longitude, latitude, height, url, fov = 10, operatorMode) {
        let aspect = 1.2722371967654986;
        let cameraParam = {
            cameraPosition: new GE.Point(longitude, latitude, height, '4326').toEPSGWeb(),
            targetPosition: new GE.Point(longitude, latitude, 0, '4326').toEPSGWeb(),
            fov: fov,
            aspect: aspect,
            near: 10,
            far: 100000,
        }
        let viewFieldColor = '#7FFF00'; //可视域内的颜色
        let textureProjectMix = 1;
        let projectTextureObject = new GE.ProjectTextureObject();
        projectTextureObject.setCamera(cameraParam);
        let videoParam = { texture: url, isVideoTexture: true };
        projectTextureObject.setVideo(videoParam);
        projectTextureObject.openProject();
        if (operatorMode) {
            projectTextureObject.setControlModel(operatorMode);
        }
        projectTextureObject.hideControl(); //关闭控制器
    }

    //使用VideoObject组件
    function addVideoObject(longitude, latitude, height, url) {
        let videoObject = new GE.VideoObject({
            position: new GE.Point(longitude, latitude, height),
            url: url,
            width: 1920,
            height: 1080
        })
        app.add(videoObject);

        window.videoObject = videoObject;
    }

    //用ProjectTextureObject组件做测试。最大行数，列数，间距可以自己调节
    function testProjectTextureObject() {
        let maxRow = 2; //最大行数
        let maxCol = 8; //最大列数
        let space = 0.003; //经纬度上的间距
        for (let i = 0; i < maxRow; i++) {
            for (let j = 0; j < maxCol; j++) {
                addProject(120.170646 + i * space, 30.28362 + j * space, 1000, 'http://localhost:9000/examples/resources/video/VideoTestRes/720p.mp4', 10, 'translate'); //用ProjectTextureObject组件做测试
            }
        }
    }

    //用VideoObject组件做测试。最大行数，列数，间距可以自己调节
    function testVideoObject() {
        let maxRow = 8; //最大行数
        let maxCol = 8; //最大列数
        let space = 0.02; //经纬度上的间距
        for (let i = 0; i < maxRow; i++) {
            for (let j = 0; j < maxCol; j++) {
                addVideoObject(120.170646 + i * space, 30.28362 + j * space, 10, 'http://localhost:9000/examples/resources/video/VideoTestRes/720p.mp4') //用VideoObject组件做测试
            }
        }
    }
    // addVideoObject(120.170646, 30.28362, 10, 'http://localhost:9000/examples/resources/video/VideoTestRes/720p.mp4') //用VideoObject组件做测试
    // addVideoObject(120.190646, 30.28362, 10, 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/video/test.mp4') //用VideoObject组件做测试

    testProjectTextureObject(); //用ProjectTextureObject组件做测试
    // testVideoObject(); //用VideoObject组件做测试

</script>

</html>